<template>
  <div class="main">
    <div class="content">
      <h1 class="title">{{ data.orgName }}用电服务报告</h1>
      <div class="infoBox">
        <div class="tit">
          <img class="title-img" src="@/assets/riFill-mail-unread-fill 1@1x.png" />
          <span>基本信息</span>
        </div>
        <div class="msg">
          <div class="box">
            <div class="left">
              <p>
                户 号: <span>{{ data.customerNo }}</span>
              </p>
              <p>
                户 名: <span>{{ data.customerName }}</span>
              </p>
              <p>
                地 址: <span>{{ data.address }}</span>
              </p>
              <p>
                市场化属性: <span>{{ data.marketizationAttributeName }}</span>
              </p>
              <p>
                计费方式: <span>{{ data.declareWayName }}</span>
              </p>
              <p>
                联 系 人: <span>{{ data.contactName }}</span>
              </p>
              <p>
                电 话: <span>{{ data.contactPhone }}</span>
              </p>
              <p>
                报告月份: <span>{{ data.year }}</span>
              </p>
              <p style="font-size: 14px">
                说明: <span>本报告只限于数据采集部分</span>
              </p>
            </div>
            <div class="right">
              <div class="star">
                <i v-for="item in data.userStarRating" :key="item" class="el-icon-star-on"></i>
              </div>
              <span style="font-size: 13px; margin-left: 15px">星级用户</span>
            </div>
          </div>
        </div>
      </div>
      <div class="infoBox">
        <div class="tit">
          <img class="title-img" src="@/assets/iconPark-excel 1@1x.png" />
          <span>本年用电概况</span>
        </div>
        <div class="msg">
          <div class="box">
            <div class="left">
              <p>
                本年 用电量:
                <span style="margin-right: 20px">{{ data.ecValueMT }}kWh</span>
                电费:
                <span style="margin-right: 20px">{{ data.totalCharge }}元</span>
                平均电价:
                <span>{{ data.avgPrice }}元/kWh</span>
              </p>
              <p>
                电度电费{{ data.degreeCharge }}元,占比{{
                  (
                    (data.degreeCharge /
                      (data.degreeCharge +
                        data.basicCharge +
                        data.adjustCharge)) *
                    100
                  ).toFixed(2)
                }}%
              </p>
              <p>
                基本电费{{ data.basicCharge }}元,占比{{
                  (
                    (data.basicCharge /
                      (data.degreeCharge +
                        data.basicCharge +
                        data.adjustCharge)) *
                    100
                  ).toFixed(2)
                }}%
              </p>
              <p>
                力调电费{{ data.adjustCharge }}元,占比{{
                  (
                    (data.adjustCharge /
                      (data.degreeCharge +
                        data.basicCharge +
                        data.adjustCharge)) *
                    100
                  ).toFixed(2)
                }}%
              </p>
              <div
                class="tiao"
                style="
                  width: 484px;
                  height: 27px;
                  display: flex;
                  margin-top: 40px;
                "
              >
                <img
                  :style="{ left: tiao + 'px' }"
                  src="@/assets/三角形 PbjUUTu@1x.png"
                />
                <div
                  class="one"
                  :style="{
                    'background-color': '#81B337',
                    width: '242px',
                    height: '100%',
                  }"
                ></div>
                <div
                  class="two"
                  :style="{
                    'background-color': '#F2BD42',
                    width: '128px',
                    height: '100%',
                  }"
                ></div>
                <div
                  class="three"
                  :style="{
                    'background-color': '#E21212',
                    width: '114px',
                    height: '100%',
                  }"
                ></div>
              </div>
              <p :style="{ 'margin-left': tiao - 20 + 'px' }">
                {{ data.avgPrice }}元/kWh
              </p>
              <p
                style="font-size: 14px; color: #e21212; width: 700px"
              >
                建议:{{data.elecUseSuggest}}
              </p>

            </div>
            <div class="right">
              <!-- <div id="dianfei" style="width: 400px; height: 350px" /> -->
              <img id="dianfei" v-if="data.chartCharge" :src="data.chartCharge" style="width: 450px; height: 350px" alt="" />
            </div>
          </div>
        </div>
      </div>
      <div class="infoBox1">
        <div class="tit">
          <img class="title-img" src="@/assets/riFill-battery-2-charge-fill 1@1x.png" />
          <span>电量情况</span>
        </div>
        <div class="msg">
          <div class="box">
            <div class="all">
              <table>
                <tr>
                  <td></td>
                  <td>1月</td>
                  <td>2月</td>
                  <td>3月</td>
                  <td>4月</td>
                  <td>5月</td>
                  <td>6月</td>
                  <td>7月</td>
                  <td>8月</td>
                  <td>9月</td>
                  <td>10月</td>
                  <td>11月</td>
                  <td>12月</td>
                </tr>
                <tr>
                  <td>尖</td>
                  <td>{{ data["ecValueYF1Info"].epowerJan }}</td>
                  <td>{{ data["ecValueYF1Info"].epowerFeb }}</td>
                  <td>{{ data["ecValueYF1Info"].epowerMar }}</td>
                  <td>{{ data["ecValueYF1Info"].epowerApr }}</td>
                  <td>{{ data["ecValueYF1Info"].epowerMay }}</td>
                  <td>{{ data["ecValueYF1Info"].epowerJun }}</td>
                  <td>{{ data["ecValueYF1Info"].epowerJul }}</td>
                  <td>{{ data["ecValueYF1Info"].epowerAug }}</td>
                  <td>{{ data["ecValueYF1Info"].epowerSep }}</td>
                  <td>{{ data["ecValueYF1Info"].epowerOct }}</td>
                  <td>{{ data["ecValueYF1Info"].epowerNov }}</td>
                  <td>{{ data["ecValueYF1Info"].epowerDec }}</td>
                </tr>
                <tr>
                  <td>峰</td>
                  <td>{{ data["ecValueYF2Info"].epowerJan }}</td>
                  <td>{{ data["ecValueYF2Info"].epowerFeb }}</td>
                  <td>{{ data["ecValueYF2Info"].epowerMar }}</td>
                  <td>{{ data["ecValueYF2Info"].epowerApr }}</td>
                  <td>{{ data["ecValueYF2Info"].epowerMay }}</td>
                  <td>{{ data["ecValueYF2Info"].epowerJun }}</td>
                  <td>{{ data["ecValueYF2Info"].epowerJul }}</td>
                  <td>{{ data["ecValueYF2Info"].epowerAug }}</td>
                  <td>{{ data["ecValueYF2Info"].epowerSep }}</td>
                  <td>{{ data["ecValueYF2Info"].epowerOct }}</td>
                  <td>{{ data["ecValueYF2Info"].epowerNov }}</td>
                  <td>{{ data["ecValueYF2Info"].epowerDec }}</td>
                </tr>
                <tr>
                  <td>平</td>
                  <td>{{ data["ecValueYF3Info"].epowerJan }}</td>
                  <td>{{ data["ecValueYF3Info"].epowerFeb }}</td>
                  <td>{{ data["ecValueYF3Info"].epowerMar }}</td>
                  <td>{{ data["ecValueYF3Info"].epowerApr }}</td>
                  <td>{{ data["ecValueYF3Info"].epowerMay }}</td>
                  <td>{{ data["ecValueYF3Info"].epowerJun }}</td>
                  <td>{{ data["ecValueYF3Info"].epowerJul }}</td>
                  <td>{{ data["ecValueYF3Info"].epowerAug }}</td>
                  <td>{{ data["ecValueYF3Info"].epowerSep }}</td>
                  <td>{{ data["ecValueYF3Info"].epowerOct }}</td>
                  <td>{{ data["ecValueYF3Info"].epowerNov }}</td>
                  <td>{{ data["ecValueYF3Info"].epowerDec }}</td>
                </tr>
                <tr>
                  <td>谷</td>
                  <td>{{ data["ecValueYF4Info"].epowerJan }}</td>
                  <td>{{ data["ecValueYF4Info"].epowerFeb }}</td>
                  <td>{{ data["ecValueYF4Info"].epowerMar }}</td>
                  <td>{{ data["ecValueYF4Info"].epowerApr }}</td>
                  <td>{{ data["ecValueYF4Info"].epowerMay }}</td>
                  <td>{{ data["ecValueYF4Info"].epowerJun }}</td>
                  <td>{{ data["ecValueYF4Info"].epowerJul }}</td>
                  <td>{{ data["ecValueYF4Info"].epowerAug }}</td>
                  <td>{{ data["ecValueYF4Info"].epowerSep }}</td>
                  <td>{{ data["ecValueYF4Info"].epowerOct }}</td>
                  <td>{{ data["ecValueYF4Info"].epowerNov }}</td>
                  <td>{{ data["ecValueYF4Info"].epowerDec }}</td>
                </tr>
              </table>
              <img id="zhanbi" v-if="data.chartEpower" :src="data.chartEpower" style="width:100%;height:500px"/>
              <p style="font-size: 14px; color: #e21212; width: 700px">
                建议:{{data.epowerSuggest}}
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="finBox">
        <div class="left">
          <div style="display: flex">
            本年度已执行巡视:{{ data.executeTourNum }}次
            <div class="progress">
              <div
                :style="{
                  width: XSCS + '%',
                  height: '100%',
                  'background-color': '#81b337',
                }"
              ></div>
              <div
                :style="{
                  width: 100 - XSCS + '%',
                  height: '100%',
                  'background-color': '#4095e5',
                }"
              ></div>
            </div>
            还剩次数:{{ data.noExecuteTourNum }}次
          </div>
          <p>
            最近一次巡视报告:<a href="#">{{ data.lastTourReportName }}.pdf</a>
          </p>
          <p>
            本年度发现缺陷 <span>{{ data.yearTotalFlaw }}个</span>
          </p>
          <p>
            已处理缺陷 <span>{{ data.processedFlaw }}个</span>
          </p>
          <p>
            未处理缺陷 <span>{{ data.noProcessedFlaw }}个</span>
          </p>
          <p style="text-indent: 10px; color: #e21212; margin-top: 50px">
            需要持续跟进的问题:<span>{{data.taskSuggest}}</span>
          </p>
        </div>
        <img
          id="right"
          v-if="data.chartFlaw"
          :src="data.chartFlaw"
          style="width: 300px; height: 230px"
          alt=""
        />
      </div>
    </div>
  </div>
</template>

<script>
// import * as echarts from 'echarts'
export default {
  name: 'yReportIndex',
  props: ['data'],
  data () {
    return {}
  },
  created () {},
  computed: {
    tiao () {
      return (this.data.avgPrice > 1.5 ? 1 : this.data.avgPrice / 1.5) * 484 - 20
    },
    XSCS () {
      return (
        (this.data.executeTourNum /
          (this.data.executeTourNum + this.data.noExecuteTourNum)) *
        100
      )
    }
  },
  mounted () {
    // this.myChart1()
    // this.myChart2()
    // this.myChart3()
  },
  methods: {
    async handleClick () {}
    // myChart1 () {
    //   const myChart = echarts.init(document.getElementById('dianfei'))
    //   myChart.setOption({
    //     tooltip: {
    //       trigger: 'item'
    //     },
    //     series: [
    //       {
    //         type: 'pie',
    //         radius: '50%',
    //         itemStyle: {
    //           borderRadius: 10,
    //           borderColor: '#fff',
    //           borderWidth: 2
    //         },
    //         data: [
    //           {
    //             value: this.data.degreeCharge,
    //             name: `电度电费${this.data.degreeCharge}`
    //           },
    //           {
    //             value: this.data.basicCharge,
    //             name: `基本电费${this.data.basicCharge}`
    //           },
    //           {
    //             value: this.data.adjustCharge,
    //             name: `力调电费${this.data.adjustCharge}`
    //           }
    //         ],
    //         emphasis: {
    //           itemStyle: {
    //             shadowBlur: 10,
    //             shadowOffsetX: 0,
    //             shadowColor: 'rgba(0, 0, 0, 0.5)'
    //           }
    //         }
    //       }
    //     ]
    //   })
    // },
    // myChart2 () {
    //   const myChart = echarts.init(document.getElementById('zhanbi'))
    //   myChart.setOption({
    //     tooltip: {
    //       trigger: 'axis',
    //       axisPointer: {
    //         type: 'shadow'
    //       }
    //     },
    //     grid: {
    //       left: '3%',
    //       right: '4%',
    //       bottom: '3%',
    //       containLabel: true
    //     },
    //     xAxis: [
    //       {
    //         type: 'category',
    //         data: [
    //           '1月',
    //           '2月',
    //           '3月',
    //           '4月',
    //           '5月',
    //           '6月',
    //           '7月',
    //           '8月',
    //           '9月',
    //           '10月',
    //           '11月',
    //           '12月'
    //         ]
    //       }
    //     ],
    //     yAxis: [
    //       {
    //         type: 'value'
    //       }
    //     ],
    //     series: [
    //       {
    //         name: '尖费率',
    //         type: 'bar',
    //         stack: 'Ad',
    //         emphasis: {
    //           focus: 'series'
    //         },
    //         data: [
    //           this.data.ecValueYF1Info.epowerJan,
    //           this.data.ecValueYF1Info.epowerFeb,
    //           this.data.ecValueYF1Info.epowerMar,
    //           this.data.ecValueYF1Info.epowerApr,
    //           this.data.ecValueYF1Info.epowerMay,
    //           this.data.ecValueYF1Info.epowerJun,
    //           this.data.ecValueYF1Info.epowerJul,
    //           this.data.ecValueYF1Info.epowerAug,
    //           this.data.ecValueYF1Info.epowerSep,
    //           this.data.ecValueYF1Info.epowerOct,
    //           this.data.ecValueYF1Info.epowerNov,
    //           this.data.ecValueYF1Info.epowerDec
    //         ]
    //       },
    //       {
    //         name: '峰费率',
    //         type: 'bar',
    //         stack: 'Ad',
    //         emphasis: {
    //           focus: 'series'
    //         },
    //         data: [
    //           this.data.ecValueYF2Info.epowerJan,
    //           this.data.ecValueYF2Info.epowerFeb,
    //           this.data.ecValueYF2Info.epowerMar,
    //           this.data.ecValueYF2Info.epowerApr,
    //           this.data.ecValueYF2Info.epowerMay,
    //           this.data.ecValueYF2Info.epowerJun,
    //           this.data.ecValueYF2Info.epowerJul,
    //           this.data.ecValueYF2Info.epowerAug,
    //           this.data.ecValueYF2Info.epowerSep,
    //           this.data.ecValueYF2Info.epowerOct,
    //           this.data.ecValueYF2Info.epowerNov,
    //           this.data.ecValueYF2Info.epowerDec
    //         ]
    //       },
    //       {
    //         name: '平费率',
    //         type: 'bar',
    //         stack: 'Ad',
    //         emphasis: {
    //           focus: 'series'
    //         },
    //         data: [
    //           this.data.ecValueYF3Info.epowerJan,
    //           this.data.ecValueYF3Info.epowerFeb,
    //           this.data.ecValueYF3Info.epowerMar,
    //           this.data.ecValueYF3Info.epowerApr,
    //           this.data.ecValueYF3Info.epowerMay,
    //           this.data.ecValueYF3Info.epowerJun,
    //           this.data.ecValueYF3Info.epowerJul,
    //           this.data.ecValueYF3Info.epowerAug,
    //           this.data.ecValueYF3Info.epowerSep,
    //           this.data.ecValueYF3Info.epowerOct,
    //           this.data.ecValueYF3Info.epowerNov,
    //           this.data.ecValueYF3Info.epowerDec
    //         ]
    //       },
    //       {
    //         name: '谷费率',
    //         type: 'bar',
    //         stack: 'Ad',
    //         emphasis: {
    //           focus: 'series'
    //         },
    //         data: [
    //           this.data.ecValueYF4Info.epowerJan,
    //           this.data.ecValueYF4Info.epowerFeb,
    //           this.data.ecValueYF4Info.epowerMar,
    //           this.data.ecValueYF4Info.epowerApr,
    //           this.data.ecValueYF4Info.epowerMay,
    //           this.data.ecValueYF4Info.epowerJun,
    //           this.data.ecValueYF4Info.epowerJul,
    //           this.data.ecValueYF4Info.epowerAug,
    //           this.data.ecValueYF4Info.epowerSep,
    //           this.data.ecValueYF4Info.epowerOct,
    //           this.data.ecValueYF4Info.epowerNov,
    //           this.data.ecValueYF4Info.epowerDec
    //         ]
    //       }
    //     ]
    //   })
    // },
    // myChart3 () {
    //   const myChart = echarts.init(document.getElementById('right'))
    //   myChart.setOption({
    //     tooltip: {
    //       trigger: 'item'
    //     },
    //     legend: {
    //       orient: 'vertical',
    //       right: 10,
    //       top: 20,
    //       bottom: 20
    //     },
    //     series: [
    //       {
    //         type: 'pie',
    //         radius: '50%',
    //         label: {
    //           show: false,
    //           position: 'center'
    //         },
    //         itemStyle: {
    //           borderRadius: 10,
    //           borderColor: '#fff',
    //           borderWidth: 2
    //         },
    //         data: [
    //           { value: this.data.processedFlaw, name: '已处理' },
    //           { value: this.data.noProcessedFlaw, name: '未处理' }
    //         ],
    //         emphasis: {
    //           itemStyle: {
    //             shadowBlur: 10,
    //             shadowOffsetX: 0,
    //             shadowColor: 'rgba(0, 0, 0, 0.5)'
    //           }
    //         }
    //       }
    //     ]
    //   })
    // }
  }
}
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  justify-content: center;
  width: 100%;
  .content {
    width: 1100px;
    padding: 0px 40px 40px 40px;
    background-color: #fff;
    .title {
      text-align: center;
    }
    .infoBox {
      .tit {
        position: relative;
        font-size: 18px;
        img {
          position: absolute;
          top: 2px;
          left: -25px;
        }
      }
      .msg {
        padding: 0 15px 20px;
        .box {
          display: flex;
          justify-content: space-between;
          border-bottom: 1px solid #bbb;
          .left {
            p {
              margin: 10px 0;
            }
            .tiao {
              position: relative;
              img {
                position: absolute;
                right: 130px;
                top: -28px;
              }
            }
            table {
              border-collapse: collapse;
              margin-left: 100px;
              margin-bottom: 30px;
              td {
                width: 150px;
                height: 50px;
                padding-left: 10px;
                border: 1px solid #ebebeb;
              }
            }
            .payWay {
              display: flex;
              margin-top: 38px;
              font-size: 14px;
              margin-bottom: 50px;
              .btn {
                width: 140px;
                height: 32px;
                background-color: rgba(255, 255, 255, 1);
                border: 1px solid rgba(22, 132, 252, 1);
                text-align: center;
                color: #1684fc;
                line-height: 32px;
              }
              .active {
                background-color: #1684fc;
                color: #fff;
              }
            }
            .max-need {
              display: flex;
              height: 32px;
              line-height: 32px;
              .line {
                display: flex;
                position: relative;
                width: 320px;
                align-items: center;
                .line-l {
                  height: 6px;
                  background-color: #1684fc;
                  border-radius: 50px 0 0 50px;
                }
                .line-r {
                  height: 6px;
                  background-color: #e8e8e8;
                  border-radius: 0 50px 50px 0;
                }
                .qiu {
                  position: absolute;
                  width: 16px;
                  height: 16px;
                  border-radius: 50%;
                  border: 1px solid #1684fc;
                  background-color: #fff;
                }
              }
            }
          }
          .all {
            table {
              border-collapse: collapse;
              margin-bottom: 30px;
              td {
                width: 71px;
                height: 48px;
                padding-left: 10px;
                border: 1px solid #ebebeb;
              }
            }
          }
          .right {
            position: relative;
            .star {
              margin-top: 50px;
              margin-right: 167px;
              margin-bottom: 15px;
              .el-icon-star-on {
                font-size: 27px;
                margin-left: 10px;
                color: rgba(226, 18, 18, 1);
              }
            }
            #dianfei {
              position: absolute;
              right: 0px;
              top: -90px;
            }
            #zhanbi {
              position: absolute;
              right: 40px;
              top: 40px;
            }
            .zhanbi {
              position: absolute;
              width: 110px;
              top: 150px;
              right: 120px;
            }
            .zbtit {
              position: absolute;
              bottom: 50px;
              right: 20px;
              width: 300px;
              color: #81b337;
              font-size: 20px;
              font-weight: 500;
              span {
                color: #e21212;
              }
            }
          }
        }
      }
    }
    .infoBox1 {
      .tit {
        position: relative;
        font-size: 18px;
        img {
          position: absolute;
          top: 2px;
          left: -25px;
        }
      }
      .msg {
        padding: 0 15px 20px;
        .box {
          border-bottom: 1px solid #bbb;
          .all {
            table {
              border-collapse: collapse;
              margin-top: 30px;
              margin-bottom: 30px;
              td {
                width: 80px;
                height: 48px;
                text-align: center;
                border: 1px solid #ebebeb;
              }
            }
            #zhanbi {
              width: 100%;
              height: 400px;
            }
          }
        }
      }
    }
    .finBox {
      position: relative;
      .left {
        .progress {
          display: flex;
          width: 655px;
          height: 20px;
          margin-left: 20px;
          margin-right: 20px;
        }
      }
      #right {
        position: absolute;
        top: 20px;
        right: 100px;
      }
    }
  }
}
.title-img{
  width: 21px;
  height: 21px;
}
</style>
